/**
 * 输入框
 */
Vue.component('v-input1', {
	// 声明 props
	props: ['icon_img', 'placeholder', 'input_id', 'input_type'],
	template: '<div class="input-layout" >' +
		'<img class="pwd" style="width: 17px;margin-top: 7px;" v-bind:src="icon_img" />' +
		'<input  v-bind:id="input_id" v-bind:name="input_id" v-bind:type="input_type"  v-bind:placeholder="placeholder" />' +
		'</div>',
})

/**
 * 输入框  文本居左
 */
Vue.component('v-input2', {
	// 声明 props
	props: ['lefttext', 'placeholder', 'input_id', 'input_type'],
	template: '<div class="input-layout" style="border-bottom: 1px solid #eoeoeo;">' +
		'<div style="float:left;  left: 10px; top: 10px;width:30%;height: 45px; line-height: 41px; text-align: center;" >{{lefttext}}</div>' +
		'<input  style="float:left;width:63%" v-bind:id="input_id" v-bind:name="input_id" v-bind:type="input_type"  v-bind:placeholder="placeholder" />' +
		'</div>',
})

/**
 * 输入框  文本居左  textarea
 */
Vue.component('v-textarea', {
	// 声明 props
	props: ['lefttext', 'placeholder', 'input_id', 'input_type'],
	template: '<div class="input-layout" style="border-bottom: 1px solid #eoeoeo;height:130px">' +
		'<div style="float:left;  left: 10px; top: 10px;width:30%;height: 45px; line-height: 41px; text-align: center;" >{{lefttext}}</div>' +
		'<textarea  style="float:left; border:1px solid #E0E0E0;   width: 63%; height:120px;" v-bind:id="input_id" v-bind:name="input_id" v-bind:type="input_type"  v-bind:placeholder="placeholder" ></textarea>' +
		'</div>',
})

/**
 * 单行按钮
 */
Vue.component('v-singlebutton', {
	// 声明 props
	props: ['button_id', 'text',],
	template: '<button  v-bind:id="button_id"   type="submit" class="single-button" >{{text}}</button>',
		data: {
		  styleObject: {
		    color: this.color,
		  }
		}
})

/**
 * 验证码
 */
Vue.component('v-input-qcode', {
	// 声明 props
	props: ['icon_img', 'qcode_id', 'send_id','send_code_fun'],

	template: '<div class="input-layout">' +
		'<img class="pwd"  v-bind:src="icon_img" />' +
		'<input  v-bind:id="qcode_id"  class="code" style="margin-bottom: 5px" type="number" placeholder="请输入验证码" />' +
		'<div class="cutting"></div>' +
		'<button v-bind:id="send_id" class="forget" v-on:click="sendCode"> 获取验证码</button>' +
		'</div>',
	//	data: {
	//		wait1: 30,
	//		tempEvent:null,
	//	},
	data: function() {
		return {
			wait: 30,
			tempEvent: null,
		}
	},
	methods: {
		sendCode: function(event) {
			tempEvent = event.target;
//			alert(this.wait)
    			 var  func=eval(this.send_code_fun);
      		 new func();


			this.time(event.target)
		},
		time: function(o) {
			var self = this;
			
			var wait = this.wait;
		
			if(wait == 0) {
				o.removeAttribute("disabled");
				o.innerHTML = "发送验证码";
				this.wait = 30;
			} else {
				o.setAttribute("disabled", true);
				o.innerHTML = "重新发送(" + this.wait + ")";
				this.wait--;
				setTimeout(function() {
						self.time(tempEvent)
					},
					1000)
			}
		}

	}
})


/**
 * 验证码
 */
Vue.component('v-input-qcode2', {
	// 声明 props
	props: [ 'qcode_id', 'send_id','send_code_fun'],

	template: '<div class="input-layout">' +
	
		'<input  v-bind:id="qcode_id"  class="code" style="margin-bottom: 5px;margin-left:3%;" type="number" placeholder="请输入验证码" />' +
		'<div class="cutting"></div>' +
		'<button v-bind:id="send_id" class="forget" v-on:click="sendCode"> 获取验证码</button>' +
		'</div>',
	//	data: {
	//		wait1: 30,
	//		tempEvent:null,
	//	},
	data: function() {
		return {
			wait: 30,
			tempEvent: null,
		}
	},
	methods: {
		sendCode: function(event) {
			tempEvent = event.target;
//			alert(this.wait)
    			 var  func=eval(this.send_code_fun);
      		 new func();


			this.time(event.target)
		},
		time: function(o) {
			var self = this;
			
			var wait = this.wait;
		
			if(wait == 0) {
				o.removeAttribute("disabled");
				o.innerHTML = "发送验证码";
				this.wait = 30;
			} else {
				o.setAttribute("disabled", true);
				o.innerHTML = "重新发送(" + this.wait + ")";
				this.wait--;
				setTimeout(function() {
						self.time(tempEvent)
					},
					1000)
			}
		}

	}
})


Vue.component('v-article', {
	// 声明 props
	props: ['headimg', 'username','articleimg', "iconimg",   'article_title','subtime','readnum','onclick'],
	template: '	<div class="article-layout" v-bind:onclick="onclick">'+
				'<div class="v-head">'+
					'<img  v-bind:src="headimg"  />'+
					'<div class="sub-user">{{username}}</div>'+
				'</div>'+
				'<div class="img-layout">'+
					'<img  v-bind:src="articleimg"  />'+
					'<div class="title">{{article_title}}</div>'+
				'</div>'+
				'<div class="article-footer">'+
					'<div class="time">{{subtime}}</div>'+
					'<img class="num-icon" v-bind:src="iconimg"  />'+
					'<div class="num">{{readnum}}</div>'+
				'</div>'+
			'</div>',

})


/**
 * button group
 */
Vue.component('v-button-group', {
	// 声明 props
	props: ['iconimg', 'text','jt'],
	template: '	<div class="v-button-layout">'+
			'<img class="icon" v-bind:src="iconimg" />'+
			'<div class="text">{{text}}</div>'+
			'<img class="jt" v-bind:src="jt" />'+
		'</div>',


})

/**
 * 商品列表
 */
Vue.component('v-shop-item', {
	// 声明 props
	props: ['commdityimg', 'title','disprice','originprice','comment'],
	template: '	<div class="commdity">'+
					'<div class="left">'+
						'<img  v-bind:src="commdityimg" />'+
					'</div>'+
					'<div class="right">'+
						'<div class="commdity-name">{{title}}'+
						'</div>'+
						'<div class="price-layout">'+
							'<div class="discounts-price">¥{{disprice}}</div>'+
							'<div class="orgin-price">¥{{originprice}}</div>'+
						'</div>'+
						'<div class="comment-num">{{comment}}</div>'+
					'</div>'+
				'</div>',


})